<script setup>
import { CreditCardIcon, WalletIcon, CurrencyDollarIcon } from '@heroicons/vue/24/outline'
import { getOrderRebate } from "@/api"
import { onMounted, ref } from "vue"
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
// Import Swiper styles
import 'swiper/css';

const modules = [Autoplay]

const images = [
    '/images/roll_one.jpg',
    '/images/roll_two.jpg',
    '/images/roll_three.jpg',
];
const rollImages2 = [
    '/images/roll_four.png',
    '/images/roll_five.png',
    '/images/roll_six.jpg',
];

const vipImages = [
    '/images/vip/icon-1.png',
    '/images/vip/icon-2.png',
    '/images/vip/icon-3.png',
    '/images/vip/icon-4.png',
    '/images/vip/icon-5.png',
    '/images/vip/icon-6.png',
    '/images/vip/icon-7.png',
    '/images/vip/icon-8.png',
    '/images/vip/icon-9.png',
    '/images/vip/icon-10.png',
];
const rebateList = ref([
    {
        "tel": "****6666",
        "username": "对方对方的",
        "rebate": 0.84
    },
    {
        "tel": "****6667",
        "username": "对方对方的",
        "rebate": 0.84
    },
    {
        "tel": "****6668",
        "username": "对方对方的",
        "rebate": 0.84
    },
    {
        "tel": "****6669",
        "username": "对方对方的",
        "rebate": 0.84
    },
    {
        "tel": "****6670",
        "username": "对方对方的",
        "rebate": 0.84
    },
    {
        "tel": "****8888",
        "username": "丘处机",
        "rebate": 0.36
    }]);
const init = () => {
    getOrderRebate({ page: 0, size: 10 }).then((res) => {
        if (res.content.length > 0) {
            rebateList.value = res.content;
        }
    })
}
onMounted(() => {
    init();
})
</script>
<style scoped>
.mySwiper {
    height: 150px !important;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: 30px;
    /* Center slide text vertically */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>
<template>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img style="height: 280px; width: 100%;" :src="image" />
        </van-swipe-item>
        <template #indicator="{ active, total }">
            <div class="custom-indicator"></div>
        </template>
    </van-swipe>
    <div class="card rounded-sm mx-2 mt-3 shadow-lg border-1">
        <div class="card-body items-center p-1">
            <div class="grid grid-cols-2 gap-4 sm:grid-cols-4  text-center">
                <router-link to="/withdraw" class="flex flex-col items-center justify-center gap-0.5">
                    <div class="rounded-full p-1.5" style="background-color: #CDF1FA;">
                        <CreditCardIcon class="h-3 w-3" />
                    </div>
                    <span class="font-bold">{{ $t('Withdraw') }}</span>
                </router-link>
                <router-link to="/wallet" class="flex flex-col items-center justify-center gap-0.5">
                    <div class="rounded-full p-1.5" style="background-color: #CDF1FA;">
                        <WalletIcon class="h-3 w-3" />
                    </div>
                    <span class="font-bold">{{ $t('Wallet') }}</span>
                </router-link>
                <router-link to="/deposit" class="flex flex-col items-center justify-center gap-0.5">
                    <div class="rounded-full p-1.5" style="background-color: #CDF1FA;">
                        <CurrencyDollarIcon class="h-3 w-3" />
                    </div>
                    <span class="font-bold">{{ $t('Deposit') }}</span>
                </router-link>
                <router-link to="/platform" class="flex flex-col items-center justify-center gap-0.5">
                    <div class="rounded-full p-1.5" style="background-color: #CDF1FA;">
                        <img src="/images/pingtai3.png" alt="icon" class="h-3 w-3" />
                    </div>
                    <span class="font-bold">{{ $t('Platform') }}</span>
                </router-link>
            </div>
        </div>
    </div>
    <div class="container px-1">
        <h6 class="mt-3 mb-2 uppercase leading-3  " style="font-size: 16px;">Membership Level：</h6>
        <template v-for="(vip, index) in vipImages" :key="index">
            <div class="h-16 w-auto mb-2" :style="`background:url(${vip});background-size: 100% 100% ;height: 75px;`">
            </div>
        </template>
    </div>
    <div class="container px-1">
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in rollImages2" :key="image">
                <img style="height: 280px; width: 100%;" :src="image" />
            </van-swipe-item>
            <template #indicator="{ active, total }">
                <div class="custom-indicator"></div>
            </template>
        </van-swipe>
    </div>
    <div class="container p-2 ">
        <swiper :spaceBetween="10" :loop="true" :centeredSlides="true" :autoplay="{
        delay: 3000,
        disableOnInteraction: false,
    }" :pagination="{
        clickable: true,
    }" :navigation="true" :modules="modules" :direction="'vertical'" :slidesPerView="5" :freeMode="true"
            class="mySwiper">
            <swiper-slide v-for="(item, index) in rebateList" :key="index">

                <span style="float:left;">[{{ item.tel }}]</span>&nbsp;get
                commission&nbsp;<span style="float:right;text-align:left;color:#333333;">${{ item.rebate }}</span>
            </swiper-slide>
        </swiper>
    </div>
    <div class="h-1 mb-6"></div>
</template>
